<template>
  <Menu :isSearch="false"></Menu>
  <div class="person">
    <div class="person-content">
      <div class="person-wrapper">
        <div class="person-wrapper-user">
          <div style="display: flex;">
            <div class="user-avatar">
              <n-avatar
                round
                :size="60"
                :src="'api' + avatar"
              />
            </div>
            <div class="user-message">
              <div style="font-size: 18px;font-weight: 700;color: #fff;">{{ username }}
                <img v-if="sex=='女'" src="../../assets/svg/womanIcon.svg" alt="" width="15" height="15">
                <img v-else src="../../assets/svg/manIcon.svg" alt="" width="15" height="15">
              </div>
              <div style="font-size: 12px;color: #fff;" v-if="sign">{{ sign }}</div>
              <div style="font-size: 12px;color: #fff;" v-else>个性签名</div>
            </div>
          </div>
          <div class="user-button" v-if="!isMySelf">
            <n-button v-if="!isFollow" @click="Follow" type="success" style="width: 75px;margin-right: 20px;color: #fff;">
              关注
            </n-button>
            <n-button v-else @click="Follow" ghost style="width: 85px;margin-right: 20px;color: #fff;">
              取消关注
            </n-button>
            <n-button ghost style="width: 85px;color: #fff;" @click="router.push(`/message/myMessage/${user_id}`)">
              发消息
            </n-button>
          </div>
        </div>
      </div>
      <div class="person-navigator">
        <n-tabs type="line" trigger="click" @update:value="handleTab" v-model:value="activeTab">
          <template #prefix>
            <div style="width: 10px;"></div>
          </template>
          <n-tab :name="item.name" v-for="item in tabDataList" :key="item.name">
            <n-icon size="20" :component="item.icon" />
            <span style="margin-left: 5px;line-height: 20px;">{{ item.name }}</span>
          </n-tab>
          <template #suffix>
            <div class="tab-suffix" @click="handleFollow('1')">
              <span>关注数</span>
              <span>{{ userData?.follow.length }}</span>
            </div>
            <div class="tab-suffix" @click="handleFollow('2')">
              <span>粉丝数</span>
              <span>{{ userData?.fans.length }}</span>
            </div>
          </template>
        </n-tabs>
      </div>
      <div class="person-content-box">
        <div class="person-space" v-if="currentTab == '空间'">
          <PersonSpace :spaceData="spaceData"></PersonSpace>
        </div>
        <div class="person-essay" v-if="currentTab == '文章'">
          <personEssay :userData=userData :essayData=essayData :isMySelf="isMySelf"></personEssay>
        </div>
        <div class="person-collect" v-if="currentTab == '收藏'">
          <PersonCollect :userCollectEssayData="userCollectEssayData"></PersonCollect>
        </div>
        <div class="person-follow" v-if="currentTab == '关注/粉丝'">
          <FollowFans :userData=userData :defaultFollow="defaultFollow"></FollowFans>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import Menu from "../../components/Menu.vue"
import { Book, Layers, Star, People } from '@vicons/ionicons5'
import {GetIdUserMess, FollowUser} from "../../api/user"
import {GetUserSpace} from "../../api/space"
import {GetUserEssay, GetUserCollectEssay} from "../../api/essay"
import {userDateType} from "../../types/index"
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router"
import PersonSpace from "./personSpace.vue"
import personEssay from "./personEssay.vue"
import FollowFans from "./followFans.vue"
import PersonCollect from "./personCollect.vue"

const router = useRouter()

const tabDataList = [
  {
    name: "文章",
    icon: Book
  },
  {
    name: "空间",
    icon: Layers
  },
  {
    name: "收藏",
    icon: Star
  },
  {
    name: "关注/粉丝",
    icon: People
  },
]

const isMySelf = ref<boolean>(false)
const avatar = ref<string>("")
const username = ref<string>("")
const sex = ref<string>("男")
const sign = ref<string>("")
const user_id = ref<number>(0)
const isFollow = ref<boolean>(false)
const userData = ref<userDateType>()
const currentTab = ref<string>()
const activeTab = ref<string>()
const spaceData = ref<any>()
const essayData = ref<any>()
const userCollectEssayData = ref<any>()
const defaultFollow = ref<string>("1")

const Follow = async() => {
  const res = await FollowUser({
    user_id: user_id.value,
    is_follow: !isFollow.value,
    fans_id: localStorage.getItem("user_id")
  })
  if(res.code == "200"){
    isFollow.value = !isFollow.value
    router.go(0)
  }else{
    window.$message.warning(res.message)
  }
}

const handleTab = async(value: string) => {
  if(value == "关注/粉丝"){

  }
  if(value == "空间"){
    const userSpaceData = await GetUserSpace(user_id.value)
    if(userSpaceData.code == "200"){
      spaceData.value = userSpaceData.data
    }else{
      window.$message.warning(userSpaceData.message)
    }
  }
  if(value == "文章"){
    const userEssayData = await GetUserEssay(user_id.value)
    if(userEssayData.code == "200"){
      essayData.value = userEssayData.data.essayList
    }else{
      window.$message.warning(userEssayData.message)
    }
  }
  if(value == "收藏"){
    const userCollectEssay = await GetUserCollectEssay(user_id.value)
    if(userCollectEssay.code == "200"){
      userCollectEssayData.value = userCollectEssay.data.essayList
    }else{
      window.$message.warning(userCollectEssay.message)
    }
  }
  currentTab.value = value
}

const handleFollow = (value:string) => {
  handleTab("关注/粉丝")
  activeTab.value = "关注/粉丝"
  defaultFollow.value = value
}

onMounted(async() => {
  user_id.value = Number.parseInt(router.currentRoute.value.params.user_id as string)
  const user_data = await GetIdUserMess(user_id.value)
  if(user_data.code != "200"){
    window.$message.warning(user_data.message)
  }else{
    sex.value = user_data.data.sex
    avatar.value = user_data.data.avatar
    username.value = user_data.data.username
    sign.value = user_data.data.sign
    userData.value = user_data.data
  }
  if(user_id.value == Number.parseInt(localStorage.getItem("user_id") as string)){
    isMySelf.value = true
  }
  user_data.data.fans.forEach((e:any) => {
    if(e.user_id == Number.parseInt(localStorage.getItem("user_id") as string)){
      isFollow.value = true
    }
  });
  handleTab("文章")
})

  
</script>

<style lang='scss' scoped>
  .person{
    width: 100%;
    min-height: 100vh;
    padding-top: 50px;
    box-sizing: border-box;
    
    .person-content{
      width: 1290px;
      height: 100%;
      margin: auto;
      .person-wrapper{
        width: 100%;
        height: 200px;
        background-image: url("../../assets/image/222.png");
        background-size: cover;
        background-position: 50%;
        display: flex;
        align-items: flex-end;
        &-user{
          width: 100%;
          // height: 75px;
          padding: 16px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          .user-avatar{
            height: 60px;
          }

          .user-message{
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          .user-button{
            margin-right: 30px;
          }
        }
      }
      .person-navigator{
        width: 100%;
        height: 60px;
        background-color: var(--bs-content-background);
        display: flex;
        align-items: flex-end;
        .tab-suffix{
          font-size: 12px;
          display: flex;
          flex-direction: column;
          align-items: center;
          // margin-left: 15px;
          margin-right: 15px;
          cursor: pointer;
        }
        .tab-suffix:hover{
          color: #63e2b7;
        }
      }
      .person-content-box{
        // background-color: #fff;
        // background-color: #000;
        margin-top: 15px;
        border-radius: 5px;
        .person-space{
          background-color: var(--bs-content-background);
          padding-top: 10px;
          padding-bottom: 10px;
          border-radius: 4px;
        }
        .person-follow{
          background-color: var(--bs-content-background);
          padding-top: 10px;
          padding-bottom: 10px;
          border-radius: 4px;
        }
        .person-collect{
          background-color: var(--bs-content-background);
          padding-top: 10px;
          padding-bottom: 10px;
          border-radius: 4px;
        }
      }
    }
  }
</style>